<template>
  <div v-bottom="chatItem" class="chatRoom">
    <tab-bar title="聊天室"></tab-bar>
    <div class="chatRoom-item">
      <div v-for="item in chatItem" :key="item.id">
        <transition appear appear-active-class="fadeIn">
          <chat-box :chatInfo="item"></chat-box>
        </transition>
      </div>
    </div>
    <div class="chatRoom-input">
      <t-input v-model="content">
        <template #button>
          <t-button @click="sendMessage">发送</t-button>
        </template>
      </t-input>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import ChatBox from "@/components/chatBox.vue";
import axios from "@/http";
import { socketURL } from "@/http";
import { useUserStore } from "@/store";
import TabBar from "@/componentMobile/HTabBar.vue";
import TInput from "@/components/input.vue";
import TButton from "@/components/button.vue";
import msg from "@/components/msg/msg";
type TChatRoomType = {
  type: "chat" | "notic" | "heart";
  message: string;
};
const store = useUserStore();
const chatItem = ref<any[]>([]);
const ws = ref<WebSocket | null>(null);
const content = ref<string>("");
const timer = ref<number | null>(null);
onMounted(() => {
  getChatRoomList();
  initChat();
  onMessage();
});
onBeforeUnmount(() => {
  timer.value && clearInterval(timer.value);
  ws.value && ws.value.close();
  ws.value = null;
});
const getChatRoomList = () => {
  axios.get("/chatRoom/search").then((res) => {
    if (res.data.error === -1) {
      chatItem.value = res.data.data;
    } else {
      // 错误提示
      chatItem.value = [];
    }
  });
};
const initChat = () => {
  ws.value = new WebSocket(`${socketURL}/socketRoom/${store.user.id}`);
  ws.value.onopen = () => {
    msg.success(`欢迎${store.user.realname}进入房间`);
    if (timer.value) {
      clearInterval(timer.value);
    }
    timer.value = setInterval(() => {
      heartCheck();
    }, 40000);
  };
};
const onMessage = () => {
  if (!ws.value) return;
  ws.value.onmessage = ({ data }) => {
    const message = JSON.parse(data);
    chatItem.value = [...chatItem.value, message];
  };
};
const sendMessage = () => {
  startSendMessage();
};
const startSendMessage = (type: TChatRoomType = { type: "chat", message: "" }) => {
  if (!content.value || !ws.value) {
    return;
  }
  const sendMessage = {
    message: type.message || content.value,
    userId: store.user.id,
    type: type.type,
    realname: store.user.realname,
    avatar: store.user.avatar,
  };
  ws.value?.send(JSON.stringify(sendMessage));
  content.value = "";
};
const heartCheck = () => {
  const sendMessage = {
    userId: store.user.id,
    type: "heart",
  };
  ws.value?.send(JSON.stringify(sendMessage));
};
</script>
<style scoped lang="scss">
@import url("../../css/comment/animate.css");
.chatRoom {
  overflow: scroll;
  height: $content-height;
  position: relative;
  &-item {
    margin: 45px 10px 50px;
  }
  &-input {
    position: fixed;
    bottom: 45px;
    width: 100%;
    background-color: #fff;
    padding: 0 8px;
    box-sizing: border-box;
  }
}
</style>
